<template>
  <div class="asset-files-cotent">
    <div class="p-[0_25px]" style="height: calc(100% - 65px);">
      <div class="asset-title">资产合规相关文件</div>
      <div class="pt-[20px]">
        <a-form ref="formRef" class="common-form" :rules="assetFilesRules" style="width: 600px;" :model="form"
          auto-label-width @submit="handleSubmit">
          <a-form-item label="报告编号" field="report_number">
            <a-input v-model="form.report_number" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="报告名称" field="report_name">
            <a-input v-model="form.report_name" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="合规结论" field="report_status">
            <a-select v-model="form.report_status" placeholder="请选择">
              <a-option :value="'合规异常'">合规异常</a-option>
              <a-option :value="'资产合规'">资产合规</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="上传文件">
            <a-upload draggable action="/" :default-file-list="fileList">
              <template #upload-button>
                <div class="upload-style">
                  <icon-cloud-download />
                  <div class="el-upload__text">点击或者拖动文件到虚线框内上传</div>
                  <div class="el-upload__type">支持扩展名：rar、zip、doc、docx、pdf、jpg…</div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="asset-footer">
      <a-button @click="cancel" class="mr-[15px]">取消</a-button>
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue';
import { assetFilesRules } from './values'
import { useRouter } from 'vue-router';
import * as api from '@/api/compliance_registration/register_compliance/register_compliance'
import { Message } from '@arco-design/web-vue';

const props = defineProps<{
  selectedData: any
}>();

const { selectedData } = toRefs(props)

const form = ref({
  report_number: '',
  report_name: '',
  report_status: '',
})

const router = useRouter();


const formRef = ref(null);//表单实例

const fileList = ref([
  {
    uid: '-1',
    name: 'ice.png',
    url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
  },
  {
    status: 'error',
    uid: '-2',
    percent: 0,
    response: '上传错误提示',
    name: 'cat.png',
    url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
  },
  {
    uid: '-3',
    name: 'light.png',
    url: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
  },
]);

/* 取消 */
const cancel = () => {
  router.go(-1)
}
/* 提交 */
const handleSubmit = () => {
  if (!formRef.value) {
    return;
  }
  if (selectedData.value.length == 0) {
    Message.error('资产选择不能为空!');
    return
  }
  formRef.value.validate((valid) => {
    console.log(valid)
    if (!valid) {
      let params = {
        asset_package_relation: selectedData.value,
        report_file: [{
          file_name:
            "微信图片_20240122094757.png",
          file_sha_256: "d6ec8b9fbf2c65aeabba58c50d9e08d618f8cf06dfc811265cf62d0bb5992471"
        }],//上传文件
        ...form.value
      }
      api.assetRegister(params).then(res => {
        if (res.code == 200) {
          Message.success('提交成功');
          router.go(-1)
        } else {
          Message.error(res.message);
        }
      })
    } else {
      console.log('error submit!!');
      return false;
    }
  });
}
</script>

<style lang="less" scope>
@import '../index.less';

.asset-files-cotent {
  padding-top: 20px;
  border-left: 1px solid #EBF0FA;
  height: 100%;
}

.asset-footer {
  height: 65px;
  border-top: 1px solid #EBF0FA;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: end;
}
</style>